<style>
  .index_banner{
    height: 290px;
    width: 100%;
    background-image: url("/static/images/faHuoBao/banner2.png");
    /*background-color: rgb(255, 182, 0);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    margin: 0;
    padding: 0;
  }
  .index_box_1 {
    height:100px;width:80px; text-align:center;position:relative;float:left;margin-right:60px;
  }
  .index_box_imgStyle{
    no-repeat: center; height: 60px; width: 60px;
  }
  .index_box_imgStyle:hover{
    cursor: pointer;
  }
  .index_box_spanStyle{
    font-size:12px;line-height:22px;
    width:30px;height:25px;border-radius:25px!important;
    border:1px solid white;background:red;position:absolute;top:0px;right:0px;color:white;
  }
</style>
<template>
  <div>
    <div>
      <img src="/static/images/faHuoBao/banner2.png" class="img-responsive" alt="Cinque Terre">
      <Portlet title="订单管理" style="margin-top: 10px">
        <div class="index_box_1">
          <img class="index_box_imgStyle" src="/static/images/faHuoBao/pic_1.png" @click="jumpRouter('bjz')">
          <span class="index_box_spanStyle">{{numberDetail.offeringCount}}</span>
          <div style="margin-top:10px;">抢单中</div>
        </div>
        <div class="index_box_1">
          <img class="index_box_imgStyle" src="/static/images/faHuoBao/pic_2.png" @click="jumpRouter('dfk')">
          <span class="index_box_spanStyle">{{numberDetail.pendingCount}}</span>
          <div style="margin-top:10px;">待付款</div>
        </div>
        <div class="index_box_1">
          <img class="index_box_imgStyle" src="/static/images/faHuoBao/pic_3.png" @click="jumpRouter('fwz')">
          <span class="index_box_spanStyle">{{numberDetail.serviceCount}}</span>
          <div style="margin-top:10px;">服务中</div>
        </div>
        <div class="index_box_1">
          <img class="index_box_imgStyle" src="/static/images/faHuoBao/pic_4.png" @click="jumpRouter('dqd')">
          <span class="index_box_spanStyle">{{numberDetail.confirmingCount}}</span>
          <div style="margin-top:10px;">待确定</div>
        </div>
        <div class="index_box_1">
          <el-button  type="primary"  style="margin-top: 20px" @click="placeOrder">快速下单</el-button>
        </div>
        <div class="clearfix"></div>
      </Portlet>
      <Portlet title="售后管理">
        <div class="index_box_1">
          <img class="index_box_imgStyle" src="/static/images/faHuoBao/pic_5.png" @click="jumpRouter('tk')">
          <span class="index_box_spanStyle">{{numberDetail.refundCount}}</span>
          <div style="margin-top:10px;">退款</div>
        </div>
        <div class="index_box_1">
          <img class="index_box_imgStyle" src="/static/images/faHuoBao/pic_6.png" @click="jumpRouter('yc')">
          <span class="index_box_spanStyle">{{numberDetail.abnormalCount}}</span>
          <div style="margin-top:10px;">异常</div>
        </div>
        <div class="index_box_1">
          <img class="index_box_imgStyle" src="/static/images/faHuoBao/pic_7.png" @click="jumpRouter('tsgl')">
          <span class="index_box_spanStyle">{{numberDetail.complainCount}}</span>
          <div style="margin-top:10px;">投诉管理</div>
        </div>
        <div class="clearfix"></div>
      </Portlet>
    </div>
  </div>

</template>

<script>
import {mapActions} from 'vuex'
export default {
  name: 'fhbDashboard',
  // name: 'index',
  created() {
    this.getTotalNumber()
  },
  data() {
    return {
      numberDetail: {}
    }
  },
  methods: {
    test() {
      this.setPageBar([{text: '首页', href: '/'}])
    },
    getTotalNumber() {
      this.$ajax.get('/ms-fahuobao-order/FhbOrder/get-module-count').then(response => {
        if (response.success) {
          this.numberDetail = response.data
          console.log('this.numberDetail', this.numberDetail)
        }
      })
    },
    placeOrder() {
      this.$router.push({path: '/ss-fhb/fa-temporary/show'})
    },
    jumpRouter(type) {
      if (type === 'bjz') {
        this.$router.push({path: '/ss-fhb/myOrders/offering/index'})
      } else if (type === 'dfk') {
        this.$router.push({path: '/ss-fhb/myOrders/pending/index'})
      } else if (type === 'fwz') {
        this.$router.push({path: '/ss-fhb/myOrders/inService/index'})
      } else if (type === 'dqd') {
        this.$router.push({path: '/ss-fhb/myOrders/confirming/index'})
      } else if (type === 'tk') {
        this.$router.push({path: '/ss-fhb/afterService/refund/index'})
      } else if (type === 'yc') {
        this.$router.push({path: '/ss-fhb/afterService/abnormal/index'})
      } else if (type === 'tsgl') {
        this.$router.push({path: '/ss-fhb/complaint'})
      }
    },
    ...mapActions([
      'setRefreshRoute',
      'setPageBar'
    ])
  }
}
</script>
